<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue定义函数，调用函数</title>
  <script src="js/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 函数的调用 必须用vue的事件来调用-->
    {{say()}}
    {{whatcolor('red')}}
    <!-- 点击时间不使用onclick 用@click -->
    <button @click="whatcolor('red')">点我有惊喜</button>
    <button>点我有惊吓</button>
  </div>

  <script>
    // js
    function whatcolor(color) {
      console.log(red)
    }
    // 所有方法在Vue对象中声明
    var vm = new Vue({
      el: '#app',
      data: {},
      // 所有的函数必须在methods中定义
      methods: {
        // 函数声明
        say: function () {
          alert("say hi");
          console.log("say method");
        },
        whatcolor: function (color) {
          // return color;
          console.log(color)
        }
      }
    });
  </script>
</body>

</html>